@import '../../var';
@import '../../common';
.dialog.login {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity $transition-time, z-index 0 $transition-time;
  pointer-events: none;

  &.show {
    z-index: $zindex-login-cover;
    opacity: 1;
    pointer-events: auto;
  }

  .mask {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: $mask-color;
  }

  .container {
    z-index: $zindex-login-dialog;
    display: flex;
    flex-direction: column;
    width: 80%;
    padding: 4 * $xl 2 * $xl;
    background-color: $bgcolor;
    border-radius: $border-radius;
  }

  .header {
    display: flex;
    align-items: center;
    font-size: $font-size-large;

    .logo-wrap {
      width: 120rpx;
      height: 120rpx;
      margin-right: 40rpx;
      overflow: hidden;
      //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
      border-radius: 20rpx;
    }

    .logo {
      width: 100%;
      height: 100%;
    }
  }

  .info {
    color: $info-color;
  }

  .submit-btn {
    width: 100%;
    margin-top: 60rpx;
    color: #fff;
    background-color: $primary;
  }
  .cancel-btn {
    width: 100%;
    margin-top: 60rpx;
    color: $info-color;
    background-color: $disabled-color;
  }
}
